TreeView Control - Using Images

Using Images

Like the listview control, the treeview control needs to be 'bound' to an image control. To do this, add an ImageList Control to your form, name it, and add any images you want to use in the TreeView control to it. Be sure to set the image size first (normally set to 16x16). Set keys if you wish, as this makes it easier to identify each image. It is best to stick with one case system (ie all caps, all lowercase etc).

Now, change the ImageList property of the TreeView control to the name of the ImageList you want to use. Now, when you add a new node to the control, you can specify and image index or key too. That image will then be displayed next to the node. The following code adds a new node, with the image "TextFile" displayed next to it.

TreeView1.Nodes.Add , , , "TestImageItem", "TextFile"

You can also specify a image to be displayed when the item is selected . The following code adds a new node. The image "FolderClosed" will be displayed, and when it is selected, "FolderOpen" will be displayed (like the folders in explorer).

TreeView1.Nodes.Add , , , "TestFolderItem", "FolderClosed", "FolderOpen"

Note that in place of the text used to identify the image, you can also use its index:

TreeView1.Nodes.Add , , , "TestImageItem", 1

James first started writing tutorials on Visual Basic in 1999 whilst starting this website (then known as VB Web). Since then, the site has grown rapidly, and James has written numerous tutorials, articles and reviews on VB, PHP, ASP and C#. In October 2003, James formed the company Developer Fusion Ltd, which owns this website, and also offers various development services. In his spare time, he's a 3rd year undergraduate studying Computer Science in the UK. He's also a Visual Basic MVP.